<template>
  <div class="inner draw" @mousemove="beginPath($event)">
    <div class="wrap">
      <img id="scream" :src="imgs" style="display: none;">
      <div class="canvas_box">
      <canvas
        id="canvas"
        class="fl"
        width="1100"
        height="700"
        @mousedown="canvasDown($event)"
        @mouseup="canvasUp($event)"
        @mousemove="canvasMove($event)"
        @touchstart="canvasDown($event)"
        @touchend="canvasUp($event)"
        @touchmove="canvasMove($event)"
      />
      </div>
      <div v-if="!inputReadonly" id="control" class="fl">
        <!--画笔颜色-->
        <div id="canvas-color">
          <div style="display: flex;align-items: center;width:150px;cursor:pointer"><img
            src="../../assets/images/Pencil.svg">Color
          </div>
          <ul>
            <li v-for="item in colors" :class="{'active':config.lineColor === item}" :style="{ background: item }"
                @click="setColor(item)"/>
          </ul>
        </div>
        <!--画笔-->
        <!-- 	<div id="canvas-brush">
					<h5>画笔大小</h5>
					<span v-for="pen in brushs" :class="[pen.className,{'active': config.lineWidth === pen.lineWidth}]" @click="setBrush(pen.lineWidth)" />
				</div> -->
        <!--操作-->
        <div id="canvas-control">
          <!-- <h5>操作</h5> -->
          <div
            style="display: flex;align-items: center;min-width: 150px;cursor:pointer"
            @click="setColor('rgba(0, 0, 0, 0)')"
          ><img src="../../assets/images/Eraser.svg">Eraser
          </div>
        </div>
        <div id="canvas-control">
          <!-- <h5>操作</h5> -->
          <div
            v-for="control in controls"
            :title="control.title"
            style="display: flex;align-items: center;min-width: 100px;cursor:pointer"
            @click="controlCanvas(control.action)"
          ><img src="../../assets/images/Reset.svg">Reset
          </div>
        </div>
        <!-- 生成图像-->
        <!--        <div id="canvas-drawImage">-->
        <!--					<h5>生成图像</h5>-->
        <!--					<div class="drawImage" @click="getImage()">预览</div>-->
        <!--				</div>-->
      </div>
    </div>
    <!--存放图片-->
    <div v-if="!inputReadonly" v-show="imgUrl.length" id="img-box">
      <div v-for="src in imgUrl" :key="src" class="img-item">
        <img :src="src" />
        <span class="fa fa-close" @click="removeImg(src)"/>
      </div>
    </div>
  </div>
</template>

<style>

  .fix-body {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }

  .inner.draw {
    display: flex;
    flex-direction: row;
    background: #FFFFFF;
    width: 100%;
    position: relative;
    border: 1px #f3f5f7 solid;
    overflow: auto;
  }

  .draw h5 {
    margin-bottom: 10px;
  }

  #img-box {
    flex: 1;
    padding-left: 10px;
  }

  #img-box .img-item {
    position: relative;
    display: inline-block;
  }

  #img-box .img-item .fa {
    position: absolute;
    cursor: pointer;
    right: 1px;
    top: -1px;
    font-size: 12px;
    font-weight: 1;
    display: none;
    color: #ccc;
  }

  #img-box .img-item:hover .fa {
    display: block;
  }

  #img-box .img-item .fa:hover {
    color: #f2849e;
  }

  #img-box img {
    border: 1px #ccc solid;
    width: 90px;
    height: 60px;
    margin: 5px;
  }

  .wrap {
     /*width: 740px;*/
    /* border:1px #f3f5f7 solid; */
    overflow: hidden;
  }

  .fl {
    float: left;
    display: block;
  }

  #canvas {
     border-right: 1px #f3f5f7 solid;
    cursor: crosshair;
    background: url(../../assets/images/physiotherapy.png) !important;
    background-size: 100%;
  }

  #control {
    width: 350px;
    margin-left: 4px;
    position: absolute;
    right: 0;
    background: #fff;
    height: 100%;
    border-left: 1px solid #f3f5f7;
  }

  #control div {
    padding: 5px;
  }

  #canvas-color ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  #canvas-color ul li {
    float: left;
    display: inherit;
    width: 40px;
    height: 40px;
    border: 1px #fff solid;
    margin: 8px;
    cursor: pointer;
  }

  #canvas-color .active {
    border: 4px solid #ff5478;
  }

  #canvas-brush span {
    display: inline-block;
    width: 20px;
    height: 15px;
    margin-left: 10px;
    cursor: pointer;
    background: #000;
  }

  #canvas-brush .small {
    font-size: 12px;
  }

  #canvas-brush .middle {
    font-size: 14px;
  }

  #canvas-brush .big {
    font-size: 16px;
  }

  #canvas-control {
    border-top: 1px solid #f3f5f7;
  }

  #canvas-control span {
    display: inline-block;
    font-size: 14px;
    width: 20px;
    height: 15px;
    margin-left: 10px;
    cursor: pointer;
    background: #5ab638;
  }

  #canvas-control .active,
  #canvas-brush .active {
    color: #f2849e;
  }

  .drawImage {
    width: 100px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
  }

  @media screen and (max-width: 700px) {

    #img-box,
    #canvas-drawImage h5,
    #canvas-brush {
      display: none;
    }

    #canvas-drawImage button {
      width: auto;
      position: absolute;
      flex: 1;
    }

    .wrap #control {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      text-align: center;
    }
  }
  @media only screen and (max-width: 1680px) {
    #control {
      position:initial;
      margin-left: 0px;
      width: auto;
      height: auto;
      background: #fff;
      border-top: 1px solid #f3f5f7;
      border-left: 0px solid #f3f5f7;
    }

    #control div {
      padding: 5px;
      display: inline-block;
    }
    .inner .fl{float: initial}
    #canvas-control{border: 0}
    .canvas_box{overflow-y:auto }
  }
</style>

<script>
    export default {
        props: ['imgs', 'inputReadonly'],
        data() {
            return {
                colors: ['#9575FF', '#F5A623', '#4ED98F', '#67F523', '#4A90E2', '#B8E986', '#F8E71C', '#FF8787'],
                brushs: [{
                    className: 'small fa fa-paint-brush',
                    lineWidth: 3
                }, {
                    className: 'middle fa fa-paint-brush',
                    lineWidth: 6
                }, {
                    className: 'big fa fa-paint-brush',
                    lineWidth: 12
                }],
                context: {},
                imgUrl: [],
                canvasMoveUse: false,
                // 存储当前表面状态数组-上一步
                preDrawAry: [],
                // 存储当前表面状态数组-下一步
                nextDrawAry: [],
                // 中间数组
                middleAry: [],
                // 配置参数
                config: {
                    lineWidth: 1,
                    lineColor: '#FF8787',
                    shadowBlur: 2
                },
                classList: [],
                drawImage: false
            }
        },
        computed: {
            controls() {
                return [
                    /* {
                      title: '上一步',
                      action: 'prev',
                      className: this.preDrawAry.length ? 'active fa fa-reply' : 'fa fa-reply'
                    }, {
                      title: '下一步',
                      action: 'next',
                      className: this.nextDrawAry.length ? 'active fa fa-share' : 'fa fa-share'
                    },*/
                    {
                        title: '重置',
                        action: 'clear',
                        className: (this.preDrawAry.length || this.nextDrawAry.length) ? 'active fa fa-trash' : 'fa fa-trash'
                    }
                ]
            }
        },
        created() {
            this.$emit('setNav', '在线涂鸦画板')
        },
        mounted() {
            const canvas = document.querySelector('#canvas')
            this.context = canvas.getContext('2d')
            this.initDraw()
            this.setCanvasStyle()
            // setTimeout(function() {
            // 	this.context.drawImage(imga, 0, 0)
            // }, 4000)
            // document.querySelector('#footer').classList.add('hide-footer')
            // document.querySelector('body').classList.add('fix-body')

            window.addEventListener('scroll', this.scrollHandle)
        },
        destroyed() {
            // document.querySelector('#footer').classList.remove('hide-footer')
            // document.querySelector('body').classList.remove('fix-body')
        },
        methods: {
            parentHandleclick(e) {
                console.log(e)
            },
            scrollHandle: function(e) {
                var top = e.srcElement.scrollingElement.scrollTop
                if (top >= 0 && this.drawImage === false && this.imgs) {
                    var imga = document.getElementById('scream')
                    this.context.drawImage(imga, 0, 0)
                    this.drawImage = true
                }
            },
            isPc() {
                const userAgentInfo = navigator.userAgent
                const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
                let flag = true
                for (let v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = false
                        break
                    }
                }
                return flag
            },
            removeImg(src) {
                this.imgUrl = this.imgUrl.filter(item => item !== src)
            },
            initDraw() {
                // const preData = this.context.getImageData(0, 0, 600, 400)
                // 空绘图表面进栈
                // this.middleAry.push(preData)
                // var imga = document.getElementById('scream')
                // imga.onload = function() {
                //     this.context.drawImage(imga, 0, 0)
                // }
            },
            canvasMove(e) {
                if (this.inputReadonly) {
                    return false
                }
                if (this.canvasMoveUse) {
                    const t = e.target
                    let canvasX
                    let canvasY
                    if (this.isPc()) {
                        canvasX = e.offsetX// - t.parentNode.offsetLeft
                        canvasY = e.offsetY// - t.parentNode.offsetTop
                    } else {
                        canvasX = e.changedTouches[0].clientX - t.parentNode.offsetLeft
                        canvasY = e.changedTouches[0].clientY - t.parentNode.offsetTop
                    }

                    const lineColor = this.config.lineColor
                    let that = this
                  if (lineColor === 'rgba(0, 0, 0, 0)') {
                    // this.context.lineTo(canvasX, canvasY)
                    that.context.clearRect(canvasX, canvasY, 20, 20)
                    clearInterval(that.timer)
                    clearInterval(that.timer2)
                    that.timer = setInterval(function() {
                      that.context.clearRect(canvasX, canvasY, 20, 20)
                      clearInterval(that.timer)
                    }, 100)
                    this.timer2 = setInterval(function() {
                      clearInterval(that.timer2)
                      this.context.clearRect(canvasX, canvasY, 20, 20)
                    }, 200)
                    return false
                  }
                  this.context.lineTo(canvasX, canvasY)
                  this.context.stroke()
                }
            },
          beginPath(e) {
                const canvas = document.querySelector('#canvas')
                if (e.target !== canvas) {
                    console.log('beginPath')
                    this.context.beginPath()
                }
            },
            // mouseup
            canvasUp(e) {
                console.log('canvasUp')
                const preData = this.context.getImageData(0, 0, 600, 400)
                if (!this.nextDrawAry.length) {
                    // 当前绘图表面进栈
                    this.middleAry.push(preData)
                } else {
                    this.middleAry = []
                    this.middleAry = this.middleAry.concat(this.preDrawAry)
                    this.middleAry.push(preData)
                    this.nextDrawAry = []
                }
                this.canvasMoveUse = false
            },
            // mousedown
            canvasDown(e) {
                // console.log('canvasDown', this.config.lineColor)
console.log(this.config.lineColor)
                // if (!this.config.lineColor) {
                //   this.$message({
                //     type: 'error',
                //     message: 'Please select users'
                //   })
                //   return false
                // }
                this.canvasMoveUse = true
                // client是基于整个页面的坐标
                // offset是cavas距离顶部以及左边的距离
                const canvasX = e.offsetX// - e.target.parentNode.offsetLeft
                const canvasY = e.offsetY// - e.target.parentNode.offsetTop
                // console.log('canvasX '+ canvasX, 'canvasY '+ canvasY,'offsetLeft '+ e.target.parentNode.offsetLeft, 'offsetTop '+ e.target.parentNode.offsetTop,e)
                this.setCanvasStyle()
                // 清除子路径
                this.context.beginPath()
                this.context.moveTo(canvasX, canvasY)
                // 当前绘图表面状态
                const preData = this.context.getImageData(0, 0, 600, 400)
                // 当前绘图表面进栈
                this.preDrawAry.push(preData)
            },
            // 设置颜色
            setColor(color) {
                this.config.lineColor = color
            },
            // 设置笔刷大小
            setBrush(type) {
                this.config.lineWidth = type
            },
            // 操作
            controlCanvas(action) {
                switch (action) {
                    case 'prev':
                        if (this.preDrawAry.length) {
                            const popData = this.preDrawAry.pop()
                            const midData = this.middleAry[this.preDrawAry.length + 1]
                            this.nextDrawAry.push(midData)
                            this.context.putImageData(popData, 0, 0)
                        }
                        break
                    case 'next':
                        if (this.nextDrawAry.length) {
                            const popData = this.nextDrawAry.pop()
                            const midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2]
                            this.preDrawAry.push(midData)
                            this.context.putImageData(popData, 0, 0)
                        }
                        break
                    case 'clear':
                        this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
                        // var imga = document.getElementById('scream')
                        // this.context.drawImage(imga, 0, 0)
                        this.preDrawAry = []
                        this.nextDrawAry = []
                        this.middleAry = [this.middleAry[0]]
                        break
                }
            },
            // 生成图片
            getImage() {
                const canvas = document.querySelector('#canvas')
                const src = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
                return src
                // this.imgUrl.push(src)
                // if (!this.isPc()) {
                //     // window.open(`data:text/plain,${src}`)
                //     window.location.href = src
                // }
            },
            // 设置绘画配置
            setCanvasStyle() {
                this.context.lineWidth = this.config.lineWidth
                this.context.shadowBlur = this.config.shadowBlur
                this.context.shadowColor = this.config.lineColor
                this.context.strokeStyle = this.config.lineColor
                // 在Canvas画布 添加图片
            }
        }
    }
</script>
